<template>
	<u-popup :show="show" mode="center" bgColor="#fff" round="20">
		<view class="login">
			<view class="colse" @click="colse">
				<u-icon name="close" size="34rpx" color="#3D3D3D" bold></u-icon>
			</view>
			<view class="logo">
				个人信息
			</view>
			
			<u--form labelPosition="left" :model="temp" :rules="rules" ref="form" >
				<view class="u-flex align-center justify-center u-m-t-20 u-m-b-20" >
					<u-avatar :src="temp.avatar" @click="handleUpload" size="80"></u-avatar>
				</view>
				
				<u-form-item label="姓名" prop="name" borderBottom  >
					<u--input v-model="temp.name" border="none" maxlength=20 ></u--input>
				</u-form-item>
				
				<button class="button" :loading="submitLoading" @click="handleSubmit">
					保存
				</button>
			</u--form>
		</view>
		
		<!-- 上传 -->
		<yq-avatar @upload="myUpload" ref="avatar" />
		<!-- 裁剪 -->
		<choose-image ref="chooseImage" imageType="avatar" v-show="false"/>
		
	</u-popup>
</template>

<script>
	
	export default {
		data() {
			return {
				show:false,
				submitLoading:false,
				temp:{
					name:'',
					avatar:'',
				},
				rules:{
					'name': { type: 'string', required: true, message: '请填写姓名', trigger: ['blur', 'change'] },
					'avatar': { type: 'string', required: true, message: '请填写姓名', trigger: ['blur', 'change'] },
				}
			};
		},
		mounted() {
			
			
		},
		methods: {
			open(){
				this.temp.name = this.vuex_user_name
				this.temp.avatar = this.vuex_user_avatar
				
				this.show = true
			},
			colse(){
				this.show = false
			},
			handleSubmit(){
				this.$network('/api/user/modify',this.temp).then((res)=>{
					const data = res.data||{}
					uni.$u.toast(res.msg)
					this.$u.vuex('vuex_user_name',this.temp.name)
					this.$u.vuex('vuex_user_avatar',this.temp.avatar)
					this.$u.vuex('vuex_user_is_setting',1)
					this.$emit('change')
					this.colse()
				})
			},
			handleUpload(index) {
				this.$refs.avatar.fChooseImg(index, {
					selWidth: '600upx',
					selHeight: '600upx',
				});
			},
			myUpload(rsp) {
				this.$refs['chooseImage'].uploadFile(rsp.path).then((res)=>{
					this.temp.avatar = res.key
					
				})
			},
		}
	}
</script>

<style lang="scss">
	.login {
		height: 575rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
		padding: 58rpx 30rpx 0;

		.colse {
			position: absolute;
			top: 26rpx;
			right: 26rpx;
		}

		.logo {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #333333;
			font-weight: bold;

			image {
				border-radius: 50%;
				height: 52rpx;
				margin-right: 24rpx;
			}
		}

		.operation {
			margin-top: 100rpx;
			font-size: 24rpx;
			color: #333333;
			text-align: center;
		}

		.button {
			width: 428rpx;
			height: 80rpx;
			background: #F7C141;
			box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(58, 138, 251, 0.29);
			border-radius: 10rpx;
			margin: 66rpx auto 0;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			color: #FFFFFF;
		}

		.read {
			font-size: 22rpx;
			color: #333333;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 64rpx;

			text {
				color: #F7C141;
			}

			.spot {
				width: 22rpx;
				height: 22rpx;
				border-radius: 50%;
				&.bg{
					background-color: #F7C141;
				}
				margin-right: 20rpx;
				border: #F7C141 4rpx solid;
				margin-top: 5rpx;
			}
		}
	}
</style>
